<template>
  <div class="fold-card" :class="{ fold: isFold }" :style="sizeStyle" @click="onToggleFold(false)">
    <foldIcon v-show="isFold && showInnerElement" />
    <div v-show="!isFold && showInnerElement" class="container">
      <header class="header">
        <TitleText :title="title" />
        <section class="header-extra">
          <slot name="header"></slot>
          <el-button v-if="addBtnText" :icon="Plus" type="primary" plain @click.stop="onAdd">{{ addBtnText }}</el-button>
          <Close class="header-extra-icon" @click.stop="onToggleFold(true)" />
        </section>
      </header>
      <main class="main">
        <slot></slot>
      </main>
    </div>
  </div>
</template>

<script setup>
import { List, Close, Plus } from '@element-plus/icons-vue';
import { computed, ref, useTemplateRef, watch } from 'vue';

const defaultWidth = 'var(--ycy-fold-card-width)'
const defaultExpendPosTypeX = 'left';
const defaultExpendPosValueX = 'calc(var(--ycy-side-bar-width) + var(--ycy-gap-base) * 2)';
const defaultExpendPosValueY = 'var(--ycy-gap-base)';
const defaultFoldPosTypeX = 'left';
const defaultFoldPosValueX = 'calc(var(--ycy-gap-base) / 2)';
const defaultFoldPosTypeY = 'bottom';
const defaultFoldPosValueY = 'var(--ycy-gap-base)';

const emits = defineEmits(['add']);
const props = defineProps({
  title: {
    type: String,
    default: '标题'
  },
  expandPosTypeX: {
    type: String, // left | right
    default: defaultExpendPosTypeX
  },
  expandPosValueX: {
    type: String,
    default: defaultExpendPosValueX
  },
  expandPosValueY: {
    type: String,
    default: defaultExpendPosValueY
  },
  width: {
    type: String,
    default: defaultWidth
  },
  height: {
    type: String,
    default: 'calc(100% - var(--ycy-gap-base) * 2)'
  },
  foldPosTypeX: {
    type: String, // left | right
    default: defaultFoldPosTypeX
  },
  foldPosValueX: {
    type: String,
    default: defaultFoldPosValueX
  },
  commonPosTypeY: {
    type: String, // top | bottom
    default: defaultFoldPosTypeY
  },
  foldPosValueY: {
    type: String,
    default: defaultFoldPosValueY
  },
  foldIcon: {
    type: Object,
    default: List
  },
  addBtnText: {
    type: String,
    default: ''
  }
})

const isFold = ref(false);
const showInnerElement = ref(true);
const sizeStyle = computed(() => {
  const isValidExpandTypeX = ['left', 'right'].includes(props.expandPosTypeX);
  const isValidFoldTypeX = ['left', 'right'].includes(props.foldPosTypeX);
  const isValidCommonPosTypeY = ['top', 'bottom'].includes(props.commonPosTypeY);
  const expandPositionTypeX = isValidExpandTypeX ? props.expandPosTypeX : defaultExpendPosTypeX;
  const foldPositionTypeX = isValidFoldTypeX ? props.foldPosTypeX : defaultFoldPosTypeX;
  const foldPositionTypeY = isValidCommonPosTypeY ? props.commonPosTypeY : defaultFoldPosTypeY;
  if (!isValidExpandTypeX) console.warn(`Invalid prop: type check failed for prop expandPosTypeX. Expected left or right, but got ${props.expandPosTypeX}.`);
  if (!isValidFoldTypeX) console.warn(`Invalid prop: type check failed for prop foldPosTypeX. Expected left or right, but got ${props.foldPosTypeX}.`);
  if (!isValidCommonPosTypeY) console.warn(`Invalid prop: type check failed for prop commonPosTypeY. Expected top or bottom, but got ${props.commonPosTypeY}.`);
  
  if (!isFold.value) {
    const positionValueX = isValidExpandTypeX ? props.expandPosValueX : defaultExpendPosValueX;
    const positionValueY = isValidCommonPosTypeY ? props.expandPosValueY : defaultExpendPosValueY;
    return { [expandPositionTypeX]: positionValueX, [foldPositionTypeY]: positionValueY, width: `${props.width}`, height: `${props.height}` }
  }

  const positionValueX = isValidFoldTypeX ? props.foldPosValueX : defaultFoldPosValueX;
  const positionValueY = isValidCommonPosTypeY ? props.foldPosValueY : defaultFoldPosValueY;
  return { [foldPositionTypeX]: positionValueX, [foldPositionTypeY]: positionValueY }
})

watch(isFold, () => {
  showInnerElement.value = false;
  setTimeout(() => {
    showInnerElement.value = true;
  }, 300);
})

const onAdd = () => {
  emits('add')
}

const onToggleFold = value => {
  isFold.value = value;
}

defineExpose({
  left: props.left,
  width: props.width,
  isFold,
  onToggleFold
})
</script>

<style lang="scss" scoped>
.fold-card {
  pointer-events: all;
  z-index: 999;
  position: absolute;
  // top: var(--ycy-gap-base);
  // bottom: 100px;
  // height: calc(100% - var(--ycy-gap-base) * 2);
  border-radius: var(--el-border-radius-base);
  background-color: var(--el-fill-color-blank);
  transition: var(--ycy-transition-base);
  overflow: hidden;

  &.fold {
    z-index: 1000;
    padding: var(--ycy-gap-base);
    color: var(--el-color-white);
    cursor: pointer;
    // left: calc(var(--ycy-gap-base) / 2);
    // bottom: var(--ycy-gap-base);
    width: var(--ycy-side-bar-width);
    height: var(--ycy-side-bar-width);
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-color-primary);
    box-shadow: var(--ycy-box-shadow-primary);
  }

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--ycy-gap-base) 0;
    background-color: var(--el-bg-color-page);

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: var(--ycy-gap-base);
      margin: var(--ycy-gap-base);
      margin-top: 0;
      border-radius: var(--el-border-radius-base);
      background-color: var(--el-fill-color-blank);

      &-extra {
        display: flex;
        align-items: center;

        &-icon {
          cursor: pointer;
          width: 24px;
          height: 24px;
          margin-left: var(--ycy-gap-base);
        }
      }
    }

    .main {
      flex: 1;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>